import React, { useState, useEffect } from "react";
import {Link, useNavigate} from "react-router-dom"
import "./credits.css"
import {AutoCenter, Form, NavBar, Toast} from "antd-mobile";
import {AiOutlineRight} from "react-icons/ai";

const Credits = () => {
  const navigate = useNavigate()
  const back = () =>{
    navigate(-1)
  }
  const expired = ()=>{
    Toast.show("任务已过期");
  }
  return (
      <section className="credits">
        <NavBar style={{'backgroundColor': 'rgba(80, 62, 157, 1)', 'color': 'white'}} onBack={back}>我的积分</NavBar>

        <div className="section_4 flex-col">
          <div className="box_3 flex-row">
            <div className="title flex-row justify-between">
              <Form.Item style={{'--adm-color-background':'none', 'color':'white'}}><Link className="anone" to="/detail"><span style={{"font-size":"15px", "font-weight":"300"}}>积分明细</span><AiOutlineRight/></Link></Form.Item>
            </div>
            <div className="flex-col justify-between">
              <div className="text-wrapper_111">
                <span className="text_5"><AutoCenter>0</AutoCenter></span>
              </div>
            </div>
            <div className="title flex-row justify-between">
              <Form.Item style={{'--adm-color-background':'none', 'color':'white'}} label='积分规则' help='完成有效任务即可获取积分'></Form.Item>
            </div>
          </div>

        </div>

        <div className="section_5 flex-row">
          <div className="block_2 flex-col"/>
          <span className="text_6">积分任务</span>
        </div>

        <div className="section_6 flex-col">
          <div className="box_5 flex-row">
            <div className="group_1 flex-col">
              <span className="text_7">赚积分</span>
            </div>
          </div>
          <div className="box_7 flex-row">
            <img
                className="label_3"
                src={"https://lanhu-oss.lanhuapp.com/FigmaDDSSlicePNGfe30e9fc8106f783f47c2a5adc183445.png"}
            />
            <div className="box_8 flex-col justify-between">
              <span className="text_8">手机认证通过</span>
              <div className="image-text_1 flex-row justify-between">
                <img
                    className="thumbnail_2"
                    src={"https://lanhu-oss.lanhuapp.com/FigmaDDSSlicePNGd813123f2b33f504a23aa015d2afb2ab.png"}
                />
                <span className="text-group_1">+200积分</span>
              </div>
            </div>
            <div onClick={expired} className="text-wrapper_2 flex-col">
              <span className="text_9">已过期</span>
            </div>
          </div>
          <div className="box_7 flex-row">
            <img
                className="thumbnail_3"
                src={"https://lanhu-oss.lanhuapp.com/FigmaDDSSlicePNG38238d77c1468b4b8590e35a9cead268.png"}
            />
            <div className="section_7 flex-col justify-between">
              <span className="text_10">验证邮箱</span>
              <div className="image-text_2 flex-row justify-between">
                <img
                    className="thumbnail_4"
                    src={"https://lanhu-oss.lanhuapp.com/FigmaDDSSlicePNGd813123f2b33f504a23aa015d2afb2ab.png"}
                />
                <span className="text-group_2">+200积分</span>
              </div>
            </div>
            <div onClick={expired} className="text-wrapper_2 flex-col">
              <span className="text_9">已过期</span>
            </div>
          </div>
          <div className="box_7 flex-row">
            <img
                className="image_3"
                src={"https://lanhu-oss.lanhuapp.com/FigmaDDSSlicePNG4ddc95079e788131612bf089a359a86c.png"}
            />
            <div className="box_8 flex-col justify-between">
              <span className="text_8">发布需求并圆满完成</span>
              <div className="image-text_1 flex-row justify-between">
                <img
                    className="thumbnail_2"
                    src={"https://lanhu-oss.lanhuapp.com/FigmaDDSSlicePNGd813123f2b33f504a23aa015d2afb2ab.png"}
                />
                <span className="text-group_1">+200积分</span>
              </div>
            </div>
            <div onClick={expired} className="text-wrapper_2 flex-col">
              <span className="text_9">已过期</span>
            </div>
          </div>

        </div>
      </section>
  )
}

export default Credits
